<template>
  <div class="left-chart-1">
    <div class="center-board-title">中小学教职工编制总量</div>
    <div id="leftChart" />
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      myEchart: null
    }
  },
  watch: {
    depCode(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.zzbz.getZzbzOverview({
          dep_code: this.depCode
        })
        console.log(res)

        let dashedPic =
          ''
        let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF']
        let chartData = [
          {
            name: '应核编制总量',
            value: res.YHBZ,
            unit: '名'
          },
          {
            name: '现有事业编制',
            value: res.SYBZ,
            unit: '名'
          },
          {
            name: '编制缺口       ',
            value: res.YHBZ - res.SYBZ,
            unit: '名'
          },
          {
            name: '周转编制       ',
            value: res.ZZBZ,
            unit: '名'
          }
        ]
        let arrName = []
        let arrValue = []
        let sum = 0
        let pieSeries = [],
          lineYAxis = []

        // 数据处理
        chartData.forEach((v, i) => {
          arrName.push(v.name)
          arrValue.push(v.value)
          sum = sum + v.value
        })

        // 图表option整理
        chartData.forEach((v, i) => {
          pieSeries.push({
            name: '',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            radius: [75 - i * 20 + '%', 65 - i * 20 + '%'],
            center: ['30%', '50%'],
            label: {
              show: false
            },
            data: [
              {
                value: v.value,
                name: v.name
              },
              {
                value: sum - v.value,
                name: '',
                itemStyle: {
                  color: 'rgba(0,0,0,0)'
                }
              }
            ]
          })
          pieSeries.push({
            name: '',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [75 - i * 20 + '%', 65 - i * 20 + '%'],
            center: ['30%', '50%'],
            label: {
              show: false
            },
            data: [
              {
                value: 7.5,
                itemStyle: {
                  color: 'rgba(255,255,255,0.1)' //圆环颜色
                }
              },
              {
                value: 2.5,
                name: '',
                itemStyle: {
                  color: 'rgba(0,0,0,0)'
                }
              }
            ]
          })
          v.percent = ((v.value / sum) * 100).toFixed(1) + '%'
          lineYAxis.push({
            value: i,
            textStyle: {
              rich: {
                circle: {
                  color: color[i],
                  padding: [0, 5]
                }
              }
            }
          })
        })

        const option = {
          tooltip: {
            trigger: 'item'
          },
          color: color,
          grid: {
            top: '10%',
            bottom: '50%', //标线位置
            left: '10%',
            containLabel: false
          },
          yAxis: [
            {
              type: 'category',
              inverse: true,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: function (params) {
                  let item = chartData[params]
                  console.log(item)
                  return (
                    '{line|}{circle|●}{name|' +
                    item.name +
                    '}{value|' +
                    item.value +
                    '}{unit|名}'
                  )
                },
                interval: 0,
                inside: true,
                textStyle: {
                  color: '#fff', //元字颜色
                  fontSize: 14,
                  rich: {
                    line: {
                      width: 180, //控制标签左右位置
                      height: 2, //标线高度
                      backgroundColor: 'rgba(255,255,255,0.1)' //标线颜色
                    },
                    name: {
                      color: '#fff',
                      fontSize: 16
                    },
                    value: {
                      color: '#fff',
                      fontSize: 16,
                      fontWeight: 600,
                      padding: [0, 0, 0, 20]
                    }
                  }
                },
                show: true
              },
              data: lineYAxis
            }
          ],
          xAxis: [
            {
              show: false
            }
          ],
          series: pieSeries
        }
        this.myEchart = this.$echarts.init(document.getElementById('leftChart'))
        this.myEchart.setOption(option)
        window.addEventListener('resize', () => this.myEchart.resize(), false)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss">
.left-chart-1 {
  width: calc(35% - 45px);
  height: 100%;
  margin-left: 15px;
  margin-right: 15px;
  background-color: rgba(1, 35, 102, 0.9);
  border-radius: 20px;
  display: flex;
  flex-grow: 0;
  flex-direction: column;
  display: flex;
  flex-direction: column;

  .center-board-title {
    font-weight: bold;
    height: 50px;
    border-bottom: #336699 1px solid;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
  }
}

#leftChart {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>
